<template>
  <div>
    <p>test的值为：{{test}}</p>
    <p>user模块下的userName值为：{{userName}}</p>
    <p>通过getter获取的userName值为：{{userNameGetter}}</p>
    <input
      type="text"
      v-model="name"
    >
    <button @click="changeName">异步更改userName</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      name: ''
    }
  },
  computed: {
    ...mapGetters({
      userNameGetter: 'userName'
    }),
    ...mapState({
      test: state => {
        return state.test
      },
      userName: state => {
        return state.user.userName
      }
    })
  },
  methods: {
    changeName() {
      this.$store.dispatch('setUserName', this.name)
    }
  }
}
</script>

<style>
</style>
